<template>
    <el-transfer
        v-model="value"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="搜索中文"
        :data="data"
        @change="handleChange"
    />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {useStore} from "../../stores";

const store = useStore()

interface Option {
    key: number
    label: string
    initial: string
}

let reviseList = store.revise.needToRevise;
const generateData = () => {
    const data: Option[] = []
    reviseList.forEach((word, index) => {
        data.push({
            label: word.english,
            key: index,
            initial: word.chinese,
        })
    })
    return data
}

const data = ref<Option[]>(generateData())
const value = ref([])

const filterMethod = (query, item) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
}

const leftList = ref<Option[]>([])
const rightList = ref<Option[]>([])

const handleChange = (targetKeys) => {
    // 获取左侧和右侧列表的数据
    leftList.value = data.value.filter(item => !targetKeys.includes(item.key))
    rightList.value = data.value.filter(item => targetKeys.includes(item.key))
    const handleChange = (targetKeys) => {
        // 获取左侧和右侧列表的数据
        leftList.value = data.value.filter(item => !targetKeys.includes(item.key))
        rightList.value = data.value.filter(item => targetKeys.includes(item.key))

        // 获取右侧列表中的 target 数据
        const targets = []
        rightList.value.forEach(item => {
            const { label, initial } = item
            targets.push({ label, initial })
        })

        // 打印右侧列表的 target 数据
        console.log('右侧列表 target 数据：', targets)
    }
}
</script>